<%@ include file="/common/taglibs.jsp"%>
<fmt:message key="headerSelection" scope="request" var="hs" />
<head>
    <title><fmt:message key="productDetail.title"/></title>
    <meta name="heading" content="<fmt:message key='productDetail.heading'/>"/>
    <meta name="menu" content="MaterialMenu"/>
    <script type="text/javascript">
        dojo.event.topic.subscribe("/save", function(data, type, request) {
            if(type == "load") {
                dojo.byId("distinctiveIndex").value = "";
                //dojo.byId("distinctiveIndex1").value = "";
                dojo.byId("distinctiveId").value = "";
                //dojo.byId("distinctiveName").value = "";
                // dojo.byId("distinctiveValue").value = "";

                //document.getElementById('deleteFeatureProductForm').style.display = 'none';
            }
        });
        function editFeatureProduct(row){
            System.out.print("editing distinctive...");
            dojo.byId("distinctiveIndex").value = row.rowIndex - 1;
            //dojo.byId("distinctiveIndex1").value = row.rowIndex - 1;

            var tds = row.getElementsByTagName("td");

            dojo.byId("distinctiveId").value = dojo.string.trim(dojo.dom.textContent(tds[0]));
            dojo.byId("distinctiveName").value = dojo.string.trim(dojo.dom.textContent(tds[1]));
            dojo.byId("distinctiveDescription").value = dojo.string.trim(dojo.dom.textContent(tds[2]));

            //document.getElementById('deleteFeatureProductForm').style.display = 'inline';

            $('addFeatureProductButton').fade();
            Effect.SlideDown('divFeatureProductForm');
            return false;
        }
        function retrieveURL(url)
        {
            if (window.XMLHttpRequest)
            {
                // Non-IE browsers
                req = new XMLHttpRequest();
                req.onreadystatechange = processStateChange;
                try {
                    req.open("GET", url, true);
                } catch (e) {
                    alert(e);
                }
                req.send(null);
            } else if (window.ActiveXObject) { // IE
                req = new ActiveXObject("Microsoft.XMLHTTP");
                if (req) {
                    req.onreadystatechange =
                        processStateChange;
                    req.open("GET", url, true);
                    req.send();
                }
            }
        }

        function processStateChange() {
            if (req.readyState == 4) { // Complete
                if (req.status == 200) { // OK response
                    document.getElementById("distinctivesDescriptions").innerHTML = req.responseText;
                } else {
                    alert("Problem: " + req.statusText);
                }
            }
        }
    </script>
</head>



<div id="divFeatureProduct" >
    <input id="addFeatureProductButton" type="button" value="<fmt:message key="button.add"/>" onclick="$(this).fade(); Effect.SlideDown('divFeatureProductForm'); return false;"/>
    <input type="button" onclick="location.href='<c:url value="/saveFeatureProducts.html"/>'"
           value="<fmt:message key="button.back"/>"/>
    <s:url id="prueba" action="ad" method="rdl">
        <s:param name="decorate" value="false" />
    </s:url>

    <s:div id="featureProducts" >
        <table class="table" style="position:relative; left:-10px; top:10px; width:300px" width="300px">
            <thead>
                <tr>
                    <th class="hidden" />
                    <th><fmt:message key="featureProduct.nameLang"/></th>
                    <th><fmt:message key="featureProduct.descriptionLang"/></th>
                    <th><fmt:message key="button.delete" /></th>
                </tr>
            </thead>
            <tbody>
                <s:if test="featureProductList.size > 0">
                    <s:iterator value="featureProductList">
                        <tr class="odd" style="cursor: pointer;">
                            <td class="hidden"><s:property value="id" /></td>
                            <td><s:property value="nameLang" /></td>
                            <td><s:property value="descriptionLang" /></td>
                            <td>
                                <s:url id="delete" action="deleteAjaxFeatureProduct" includeParams="true" >
                                    <s:param name="decorate" value="false"/>
                                    <s:param name="idFeatureProduct" value="id" />
                                </s:url>
                                <s:a href="%{delete}" theme="ajax" targets="featureProducts" >
                                    <img src="<c:url value="/images/trash.png" />" alt="Delete" />
                                </s:a>
                            </td>
                        </tr>
                    </s:iterator>
                </s:if>
                <s:else>
                    <tr class="empty"><td colspan="4"><fmt:message key="empty" /></td></tr>
                </s:else>
            </tbody>
        </table>
    </s:div>
    <div id="divFeatureProductForm" style="width: 243px; display: none;" >

        <s:form id="featureProductForm" action="saveAjaxFeatureProduct" method="get" validate="true">
            <s:hidden name="decorate" value="false"/>
            <s:hidden id="featureProductId" name="featureProduct.id" value="%{featureProduct.id}"/>
            <s:hidden id="featureProductIndex" name="featureProductIndex"/>

            <s:doubleselect
                name="featureProductName"          doubleName="featureProductDescription"
                list="featureProductNames"         doubleList="featureProductDescriptions"
                listKey="name"                    doubleListKey="name"
                listValue="nameLang"                doubleListValue="nameLang"/>
            <li class="buttonBar bottom">
                <s:submit cssClass="button" key="button.add" theme="ajax" targets="featureProducts" notifyTopics="/save">
                </s:submit>

                <input id="cancelFeatureProductButton" type="button" value="<fmt:message key="button.cancel"/>" onclick="$('addFeatureProductButton').appear(); Effect.SlideUp('divFeatureProductForm'); return false;"/>

            </li>
        </s:form>

    </div>

</div>
<script type="text/javascript">
    Form.focusFirstElement($("productForm"));
    document.getElementById('divFeatureProduct').style.top = document.getElementById('productForm').offsetTop+"px";

</script>
